<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>仓库</title>
<link rel="stylesheet" href="${ctx}/static/layui/css/layui.css">
</head>
<body>
	<script type="text/html" id="demoTable">
		条码：
		<div class="layui-inline">
			<input class="layui-input" id="gcode"
				autocomplete="off">
		</div>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 商品名称：
		<div class="layui-inline">
			<input class="layui-input" id="gname"
				autocomplete="off">
		</div>
		 <button class="layui-btn" onclick="selectDepot()">搜索</button><br/>
	</script>


	<div class="layui-tab" lay-filter="demo">
		<ul class="layui-tab-title">
			<li class="layui-this" id="ccc">全部仓库</li>
			<li>仓库一</li>
			<li>仓库二</li>
		</ul>

		<div>
			<form class="layui-form">
				<div class="layui-form-item">
					<div class="layui-input-block">
						明细<input type="radio" name="chose" lay-filter="test" value="明细"checked> 
						汇总<input type="radio" name="chose" lay-filter="test" value="汇总">
					</div>
				</div>
			</form>
		</div>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<table id="demo1" lay-filter="test"></table>
				<table id="demo2" lay-filter="test"></table>
			</div>
		</div>
	</div>

	<script src="${ctx}/static/layui/layui.all.js"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		$(function() {
			$("#demo1").next().show();
			$("#demo2").next().hide();
		})
		
			var mx="demo1";
			var mxs=$("#demo1");
		function selectDepot() {
			var val=$('input:radio[name="chose"]:checked').val();
			if (val == "明细") {
				mx="demo1";
				mxs=$("#demo1");
			} else if (val == "汇总") {
				mx="demo2";
				mxs=$("#demo2");
			}
			var gcodeVal =mxs.next().find("#gcode").val();
			var gnameVal =mxs.next().find("#gname").val();
			layui.table.reload(mx, {
				where : {
					gcode : gcodeVal,
					gname : gnameVal,
					val:val
				}
			});
		}

		var url = "depot/all";
		var val=$('input:radio[name="chose"]:checked').val();
		layui.use([ 'element', 'table', 'form' ], function() {
			var element = layui.element;
			var table = layui.table;
			var form = layui.form;

			//选项卡的监听
			element.on('tab(demo)', function(data) {
				if (data.index == "0") {
					url = "depot/all";
				} else if (data.index == "1") {
					url = "depot/one";
				} else if (data.index == "2") {
					url = "depot/two";
				}

				layui.table.reload('demo1', {
					url : url,
					val:val
				});
				layui.table.reload('demo2', {
					url : url,
					val:val
				});
				if (val == "明细") {
					$("#demo1").next().show();
					$("#demo2").next().hide();
				} else if (val == "汇总") {
					$("#demo1").next().hide();
					$("#demo2").next().show();
				}
			});
			
			table.render({
				elem : '#demo1',
				height : 312,
				url : url, //数据接口
				where : {val:val},
				page : true,//开启分页
				toolbar : '#demoTable',
				cols : [ [ //表头
				{
					field : 'gname',
					title : '商品名称',
					fixed : 'left'
				}, {
					field : 'gnorms',
					title : '规格'
				}, {
					field : 'gunit',
					title : '单位'
				}, {
					field : 'osname',
					title : '供应商'
				}, {
					field : 'price',
					title : '进价'
				}, {
					field : 'num',
					title : '数量'
				}, {
					field : 'money',
					title : '金额'
				}, {
					field : 'gbrand',
					title : '品牌'
				}, {
					field : 'gtype',
					title : '商品分类'
				}, {
					field : 'gcode',
					title : '条码'
				}, {
					field : 'odate',
					title : '入库日期'
				}, {
					field : 'odepot',
					title : '仓库'
				} ] ]
			});

			layui.table.render({
				elem : '#demo2',
				height : 312,
				url : url, //数据接口
				where : {val:val},
				page : true,//开启分页
				toolbar : '#demoTable',
				cols : [ [ //表头
				{
					field : 'gnorms',
					title : '规格',
					fixed : 'left'
				}, {
					field : 'gname',
					title : '商品名称'
				}, {
					field : 'gunit',
					title : '单位'
				}, {
					field : 'money',
					title : '金额'
				}, {
					field : 'num',
					title : '数量'
				}, {
					field : 'gbrand',
					title : '品牌'
				}, {
					field : 'gtype',
					title : '商品分类'
				}, {
					field : 'gcode',
					title : '条码'
				} ] ]
			});

			form.on('radio(test)', function(data) {
			//	console.log(data.value); //被点击的radio的value值
				if (data.value == "明细") {
					$("#demo1").next().show();
					$("#demo2").next().hide();
				} else if (data.value == "汇总") {
					$("#demo1").next().hide();
					$("#demo2").next().show();
					
					layui.table.reload("demo2", {
						where : {
							val:data.value
						}
					});
				}
			});

		});
	</script>
</body>
</html>